<template>
  <nav>
    <div class="navlist">
      <img style="width: 80px; height: 40px; float: left; vertical-align:middle;" src="static/images/admindefault.jpg"/>
<!--      <span style="color: #064420; font-size: 1.5rem; float: left; vertical-align:middle; padding: 9px 0 0 5px">swapbook</span>-->
      <ul>
        <li>首页</li>
        <li>活动</li>
        <li>图书</li>
        <li>关于我们</li>
        <li>联系我们</li>
      </ul>
    </div>
    <div class="navsignin">
      <div class="parentsphoto" @mouseenter="show" @mouseleave="closeShow" v-show="isshowHead">
        <img src="static/images/admindefault.jpg" >
        <div class="Personaldetails1" v-show="isshowInfo" >
          <div>
           <div class="name">
             <span >{{ coachs.cname}}</span>&nbsp;
             <span>{{coachs.cemail}}</span><br>
             <span style="font-size: 11px">性别:{{coachs.csex}}</span>
             <span style="font-size: 11px">{{coachs.cage}}岁</span>
           </div>
           <div class="a"><a><i>{{coachs.cfans}}</i> 粉丝</a></div>
           <div class="body">
             <span>身高:{{coachs.cheight}}cm</span>&nbsp;<span>体重:{{coachs.cweight}}kg</span><br>
             <span>地址:{{coachs.caddress}}</span>
             </div>
          </div>
        </div>
      </div>
      <ul>
        <li>id</li>
      </ul>
    </div>
  </nav>

</template>

<script>
import api from "../../../../axios/api";

export default {
  name: "nav",
  data() {
    return {
      coachs:"",
      isshowHead:true,
      isshowInfo:false
    }
  },
  methods: {
    setDataFromAxios: function () {
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面coachController/getCoachByPage?currPage=1&pageSize=3
      api.setDataFromAxios("/api/coachController/selectCoachByCno/c0001", null, "get" )
        .then(dto => {
          this.coachs = dto.t;
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
    },
    show(){
      this.isshowInfo = true
    },
    closeShow(){
      this.isshowInfo = false
    }
  },
  created:function () {
    this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
  }
}
</script>
<style scoped>
body, div, img,dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {margin:0; padding:0;}
a{text-decoration:none;color:#473c33;}
a:hover{color: #bbffff}
nav{width:100%; height: 40px; background: #d4e0e0;box-shadow:0 2px 4px 0 rgb(0 0 0 / 8%); color: white;}
nav >.navlist{ padding: 0 0 0 20px; height: 40px;float: left;  }
nav >.navlist ul{ float: left; list-style-type:none; color: #473c33; font-size:0.9rem; font-weight:600; font-family:微软雅黑; }
nav .navlist ul > li{float:left; list-style:none; padding:10px 40px 0px 5px;}
nav >.navsignin{float: right;padding-right: 20px;height: 40px;  position:relative;  }
nav >.navsignin ul{float: right;  list-style-type:none; color: #473c33; font-size:0.9rem; font-weight:600; font-family:微软雅黑;}
nav >.navsignin ul li{float:right; list-style:none; padding:10px 10px 0px 15px}
nav >.navsignin> .parentsphoto{float: right;height: 50px;}
nav >.navsignin> .parentsphoto > img{width: 41px; height: 40px; border-radius:50%;}
.Personaldetails1{color: black;position: fixed;top: 45px;right: 12.2%;width: 200px;height: 200px;background-color:#fff;box-shadow:0 2px 4px 0 rgb(0 0 0 / 8%);fborder-radius:2px ;z-index: 101;}
.Personaldetails1 .body{width: 200px; float: left; padding-left: 1px; border-top: 1px solid #e8e8ed;}
.Personaldetails1 .name span{ line-height: 20px}
.Personaldetails1 .name span:nth-child(2){font-size: 14px;}
.Personaldetails1 .name span:nth-child(3){display: block;}
.Personaldetails1 .a{border-top: 1px solid #e8e8ed;}
.Personaldetails1 .a a{display: block;height: 50px;line-height: 10px;color: inherit;float: left;padding-left: 85px;}
.Personaldetails1 .a i{font-size: 20px;color: #222226;font-style: normal;font-weight: 600;display: block;line-height: 30px;height: 30px;
}
</style>
